<template>
  <div>
    <x-header :left-options="{ showBack: false }" :right-options="{ showMore: false }">
      我的
    </x-header>
    <div class="mh-scroller-box">
      <group>
        <cell title="用户登录名" :value="this.$store.state.user.loginName"></cell>
        <cell title="用户昵称" :value="this.$store.state.user.userName"></cell>
      </group>
      <group>
        <x-button @click.native="handleLogout" type="primary">退出登录</x-button>
      </group>
      <mh-tabbar :badge="unhandleVoteCount.toString()" selectedKey="my_info"></mh-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Alert, XInput, Group, XButton, Cell } from 'vux'
import qs from 'qs'
import MhTabbar from './MhTabbar'
import Api from '@/libs/api'

export default {
  components: {
    'mh-tabbar': MhTabbar,
    XInput,
    XButton,
    Group,
    Cell,
    Alert
  },
  mounted() {},
  data() {
    return {
      msg: '视频投票',
      loginName: '',
      password: '',
      unhandleVoteCount: ''
    }
  },
  methods: {
    handleLogout() {
      this.$store.commit('changeToken', null)
      this.$store.commit('changeUser', null)
      this.$router.push({
        name: 'login'
      })
    }
  }
}
</script>

<style>
@import '../style/main.less';
.vux-demo {
  margin: 20px;
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}
</style>
